<template>
  <div class="statistics-task-container common-table-theard">
    <p class="common-list-bread">详细报表</p>
    <div class="common-query-box">
      <el-form :inline="true"  labelWidth="90px">
        <el-form-item :label="nameDesc+'：'" class="width-440">
          <el-cascader
            v-model="checkedList"
            @change="changeValue" 
            :options="options"
            :props="props"
            filterable
            :show-all-levels="false"
            clearable
          ></el-cascader>
        </el-form-item>
        
        <el-form-item>
          <el-button
            class="common-btn-primary left"
            size="small"
            @click="asyncGetTableData"
            >统计</el-button
          >
          <el-button class="common-btn-solid" size="small" @click="onClickRest"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-wrapper" v-if='isResult'>
      <div class="common-table-box">
        <div class="common-table-title">
          {{tableTitle[this.path[this.$route.path]]}}
        </div>
        <el-table
          :data="tableData"
          border
          stripe
          :row-class-name="tableRowClassName"
          :span-method="arraySpanMethod"
        >
           <el-table-column
            label=""
            align="right"
            width="150">
            <el-table-column
              prop="name"
              label=""
              width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column
            :label="item.year + '年'"
            v-for="(item, idx) in data"
            :key="idx"
          >
            <el-table-column :label="item.month">
              <el-table-column
                v-for="(obj, index) in item.days"
                :key="index"
                :label="obj.day"
                min-width="30"
              >
                <template slot-scope="scope">
                  <span
                    v-for="(info, infoIdx) in scope.row.dateList"
                    :key="infoIdx"
                  >
                    <span v-if="obj.date == info" class="ok">√</span>
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div class="echarts-wrapper">
        <div class="echarts-item">
          <div class="echarts-item-content">
            <div class="echarts-info" v-if="curType === 2">
             <p class="common-list-bread">试验任务中各科目进行状况</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="eSubject"
                ></div>
              </div>
            </div>
            <div class="echarts-info">
             <p class="common-list-bread">试验{{nameDesc}}中各试验人员参与工作天数</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="ePersonnel"
                ></div>
              </div>
            </div>
            <div class="echarts-info"  v-if="curType === 3">
             <p class="common-list-bread">试验{{nameDesc}}中各试验场占用天数</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="ePlace"
                ></div><!-- id="eSubject" -->
              </div>
            </div>
          </div>
        </div>
        <div class="echarts-item">
          <div class="echarts-item-content">
            <div class="echarts-info"  v-if="curType === 2">
             <p class="common-list-bread">试验{{nameDesc}}中各试验场地占用天数</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="ePlace"
                ></div><!-- id="eSubject" -->
              </div>
            </div>
            <div class="echarts-info">
             <p class="common-list-bread">试验{{nameDesc}}中各试验装备使用数量</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="eEquipment"
                ></div><!-- id="ePersonnel" -->
              </div>
            </div>
            <div class="echarts-info"  v-if="curType === 3">
             <p class="common-list-bread">试验{{nameDesc}}中各被测装备使用数量</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="eTestEquipment"
                ></div><!-- id="eSubject" -->
              </div>
            </div>
          </div>
        </div>
        <div class="echarts-item"  v-if="curType === 2">
          <div class="echarts-item-content">
            <div class="echarts-info">
             <p class="common-list-bread">试验{{nameDesc}}中各被测装备使用数量</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                  id="eTestEquipment"
                ></div><!-- id="eSubject" -->
              </div>
            </div>
            <!--<div class="echarts-info">
              <p class="common-list-bread">试验任务中各试验装备使用天数</p>
              <div class="echarts-table">
                <div
                  class="canvas"
                :id="'echarts'+idx+1"
                ></div>
              </div> 
            </div>-->
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
// 引入饼状图
// require("echarts/lib/chart/pie");
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
// 引入legend组件
import "echarts/lib/component/legend";
import {debounce} from "utils/tools";

// 基于准备好的dom，初始化echarts实例

let labelOption = {
    show: true,
    distance: -17,
    position: 'insideTop',
    fontSize: 12,
    color:'#000',
    rich: {
        name: {
            textBorderColor: '#fff'
        }
    }
};
export default {
  // components: {
  //   UserInfoDialog
  // },
  data() {
    return {
      
      isResult: true, //初始不展示列表 默认false
      dropData: [], //下拉数据
      dataTime: [ //表头日期时间
        {
          year: 2020,
          month: 10,
          day: 29,
          date: "2020-10-29",
        },
        {
          year: 2020,
          month: 10,
          day: 30,
          date: "2020-10-30",
        },
        {
          year: 2020,
          month: 10,
          day: 31,
          date: "2020-10-31",
        },
        {
          year: 2020,
          month: 11,
          day: 1,
          date: "2020-11-01",
        },
        {
          year: 2020,
          month: 11,
          day: 2,
          date: "2020-11-02",
        },
        {
          year: 2020,
          month: 11,
          day: 3,
          date: "2020-11-03",
        },
        {
          year: 2020,
          month: 11,
          day: 4,
          date: "2020-11-04",
        },
      ],
      data: [],//最终处理后的列表数据
      tableData: [ //列表选中的集合
        {
          name: "haha",
          dateList: ["2020-10-31", "2020-11-02"],
        },
        {
          name: "帅哥",
          dateList: [],
        },
        {
          name: "帅哥1",
          dateList: ["2020-10-29", "2020-11-03"],
        },
        {
          name: "帅哥2",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥3",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥4",
          dateList: [
            "2020-10-30",
            "2020-10-31",
            "2020-11-01",
            "2020-11-02",
            "2020-11-03",
          ],
        },
        {
          name: "帅哥5",
          dateList: [
            "2020-10-29",
            "2020-10-30",
            "2020-11-02",
            "2020-11-03",
            "2020-11-04",
          ],
        },
        {
          name: "帅哥6",
          dateList: ["2020-11-02", "2020-11-03", "2020-11-04"],
        },
      ], //表格数据

      infoType: 3, //1->新增 2->编辑 3->修改基础信息  用户入口
      userId: "",
      isDialogVisible: false,

      option: {
        color: ['#73BCFF','#ABCE87','#FBCBA5','#E6A3F5','#89E8D3','#8798CE','#BE9676','#F18882','#84DCFC','#96AEFF','#FBD366','#B598FF','#FEA266','#6D7278','#DAE2E8','#87BEB0','#BFBFBF','#FF73C8','#A5E666','#AE8989'],
        tooltip: {
            // trigger: 'axis',
            // axisPointer: {
            //     // type: 'shadow'
            // }
        },
        legend: {
          right : "8%",
          itemWidth :14,
          // data: [],
          // data: ['Forest','Steppe','Desert','Wetland'],
        },
        
        xAxis: {
          type: 'category',
          axisTick: {show: false},
          data: ['2012', '2013', '2014', '2015', '2016'],
          name: '任务',
          nameTextStyle:{
            color: '#8F8F8F',
            align: 'center',
            padding: [0, 0, 0, 16]
          },
          axisLine: {
                lineStyle: {
                    color:  '#BFBFBF' ,
                }
            },
            axisLabel: {
                textStyle: {
                    color:  '#626262' , 
                }
            }
        },
        yAxis: {
          axisLine: {
              show: false
          },
          name: '科目数',
          nameTextStyle:{
            color: '#8F8F8F',
            align: 'right',
            padding: [0, 5, 0, 0]
          },
          splitLine: {
                show: true,
                lineStyle:{
                    type:'dashed'
                }
            },
          axisTick: {show: false},
        },
        series: [
            {
                name: 'Forest',
                type: 'bar',
                barGap: .8,
                label: labelOption,
                data: [320, 332, 301, 334, 390]
            },
            {
                name: 'Steppe',
                type: 'bar',
                label: labelOption,
                data: [220, 182, 191, 234, 290]
            },
            {
                name: 'Desert',
                type: 'bar',
                label: labelOption,
                data: [150, 232, 201, 154, 190]
            },
            {
                name: 'Wetland',
                type: 'bar',
                label: labelOption,
                data: [98, 77, 101, 99, 40]
            }
        ]
      },
    

      /* 人员数据 */
      props: { multiple: true, value: 'id', label: 'name', children: 'statisticsTreeVoList' },
      options: [
        {
          id: 1,
          name: "东南",
          statisticsTreeVoList: [
            {
              id: 2,
              name: "上海",
              statisticsTreeVoList: [
                { id: 3, name: "普陀" },
                { id: 4, name: "黄埔" },
                { id: 5, name: "徐汇" },
              ],
            },
            {
              id: 7,
              name: "江苏",
              statisticsTreeVoList: [
                { id: 8, name: "南京" },
                { id: 9, name: "苏州" },
                { id: 10, name: "无锡" },
              ],
            },
            {
              id: 12,
              name: "浙江",
              statisticsTreeVoList: [
                { id: 13, name: "杭州" },
                { id: 14, name: "宁波" },
                { id: 15, name: "嘉兴" },
              ],
            },
          ],
        },
        {
          id: 17,
          name: "西北",
          statisticsTreeVoList: [
            {
              id: 18,
              name: "陕西",
              statisticsTreeVoList: [
                { id: 19, name: "西安" },
                { id: 20, name: "延安" },
              ],
            },
            {
              id: 21,
              name: "新疆维吾尔族自治区",
              statisticsTreeVoList: [
                { id: 22, name: "乌鲁木齐" },
                { id: 23, name: "克拉玛依" },
              ],
            },
          ],
        },
      ],
      /* 开始结束时间 */
      startDate: "", //任务开始时间
      endDate: "", //任务结束时间

      /* color集合 */
      colorPalette: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        checkedList:[],//下拉多选集合
        preMonthDate:'',
        curDate: new Date().Format("yyyy-MM-dd"),
        path:{'/statisticsTask':2,'/statisticsSubject':3},
        nameObj:{'2':'任务','3':'科目'},
        tableTitle:{'2':'试验任务所需试验资源使用工期图','3':'试验科目所需试验资源使用工期图'},
        nameDesc: '', 

        /* 定义charts 变量 */
        eSubject: null, //科目
        ePlace: null, //地址
        eEquipment: null, //装备
        eTestEquipment: null, //被测装备
        ePersonnel: null, //人员
        /* 对应数据 */
        eSubjectData: {}, //科目数据
        ePlaceData: {}, //地址数据
        eEquipmentData: {}, //装备数据
        eTestEquipmentData: {}, //被测装备数据
        ePersonnelData: {}, //人员数据
        urlPath:{'/statisticsTask':'/statistics/listTaskDateStatistics','/statisticsSubject':'/statistics/listSubjectsDateStatistics'},
        curType:'' //区分任务和科目

    }; 
  },
  created() {
    // this.getQueryParams();
    /* this.asyncGetTableData();
      this.asyncGetDepartmentList();
      this.asyncGetTreeList(); */

    //10代表color集合数量 13代表对应的多少数据
    /* 13%10 */
        
    this.curType = this.path[this.$route.path];
    this.nameDesc = this.nameObj[this.curType]; 
    console.log('this.nameDesc')
    console.log(this.urlPath[this.$route.path])
    this.data = this.dateList();
  },
  mounted() {

      this.createEcharts();
    /* myChart = echarts.init(document.getElementById("main"), "macarons");

    // 使用刚指定的配置项和数据显示图表。 this.option
    myChart.setOption(this.option); */

      this.$nextTick(() => {
        window.addEventListener('resize',debounce(this.onResize,500));
      });
  },
  methods: {
    onResize() {
      console.log(1)
        if(this.path[this.$route.path] === 2) {
          this.eSubject ? this.eSubject.resize() : null;
        }
        this.ePlace ? this.ePlace.resize() : null;
        this.eEquipment ? this.eEquipment.resize() : null;
        this.eTestEquipment ? this.eTestEquipment.resize() : null;
        this.ePersonnel ? this.ePersonnel.resize() : null;
      },
    //修改多选下拉框数据
     changeValue(value) {
       console.log(value)
     },
    //处理后台的时间转换结构
    dateList() {
      let obj = {};
      let info = {};
      let dateArr = [];
      this.dataTime.forEach((item, index) => {
        let ym = item.year+ "" + item.month;
        if (obj[ym]) {
          info.days.push({ day: item.day, date: item.date });
          if (index == this.dataTime.length - 1) {
            dateArr.push(info);
          }
        } else {
          if (info && info.year) {
            dateArr.push(info);
            console.log(info);
            info = {};
          }
          obj[ym] = ym;
          info.year = item.year;
          info.month = item.month;
          info.days = [{ day: item.day, date: item.date }];
          console.log("这是下标" + index);
          console.log(info);
        }
      });
      console.log(dateArr);
      return dateArr;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.name == "帅哥") {/* row.type ===  1 */
        return "warning-row";
      }
      return "";
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.name == "帅哥") {/* row.type ===  1 */
        // return [1, 2];
        return [1, this.dataTime.length+1];
        // return [1, 8];
      }
    },
    //获取列表数据???
    asyncGetTableData() {
        let checkeds = [];
        this.checkedList.forEach(item => {
          checkeds.push(item[item.length-1]);
        });
        this.$axios
          .get(this.urlPath[this.$route.path], {
            params: {
              ids: checkeds.join(','),
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              let data = res.data.data;
              let echartsData = this.path[this.$route.path] === 2 ?data.subjectsStatusColumnarStatisticsMap : data;
              this.isResult = true; 
              this.dataTime = data.dateVoList;
              this.tableData = data.baseResourceDateVoList;
              this.data = this.dateList();

              if(this.path[this.$route.path] === 2) {
                this.eSubjectData = this.commonFnData(data.subjectsStatusColumnarStatisticsMap.resultColumnarStatisticsVoList,data.subjectsStatusColumnarStatisticsMap.taskNameList);//任务包含科目数据集合
              }
              
              this.ePlaceData = this.commonFnData(echartsData.fieldColumnarMap.resultPersonColumnarStatisticsVoList,echartsData.fieldColumnarMap.resultPersonNameList);//场地数据集合
              this.eEquipmentData = this.commonFnData(echartsData.experimentQuipmentColumnarMap.resultPersonColumnarStatisticsVoList,echartsData.experimentQuipmentColumnarMap.resultPersonNameList);//试验装备数据集合
              this.eTestEquipmentData = this.commonFnData(echartsData.useEquipmentColumnarMap.resultPersonColumnarStatisticsVoList,echartsData.useEquipmentColumnarMap.resultPersonNameList);//被测装备数据集合
              this.ePersonnelData = this.commonFnData(echartsData.personColumnarMap.resultPersonColumnarStatisticsVoList,echartsData.personColumnarMap.resultPersonNameList);//人员数据集合
              
              
              this.createEcharts();
            } else {
              this.$message.error(res.data.msg);
            }
          }); 
    },
    //提取公用处理函数
    commonFnData(data,taskNameList) {
      let obj = {
        xData:taskNameList,
      };
      let valueArr = [];
      data.forEach(item =>{
        let obj = {
          name: item.name,
          type: 'bar',
          barGap: .8,
          label: labelOption,
          data: item.daysNumList
        };
        valueArr.push(obj);
      });
      obj.dataList = valueArr;
      return obj;
    },
    //图表生成
    createEcharts(){
      if(this.path[this.$route.path] === 2) {
        this.eSubject = echarts.init(document.getElementById('eSubject'));
        let options1 = JSON.parse(JSON.stringify(this.option));
        options1.color = ['#73BCFF','#ABCE87','#6D7278'];
        // options1.xAxis.data = this.eSubjectData.xData;
        // options1.series = this.eSubjectData.dataList;
        this.eSubject.setOption(options1);
      }
     
      this.ePlace = echarts.init(document.getElementById('ePlace'));
      let options2 = this.option;
      // options2.xAxis.data = this.eSubjectData.xData;
      // options2.series = this.eSubjectData.dataList;
      options2.xAxis.name = '场地';
      options2.yAxis.name = '天数';
      this.ePlace.setOption(options2);

      this.eEquipment = echarts.init(document.getElementById('eEquipment'));
      let options3 = this.option;
      // options3.xAxis.data = this.eSubjectData.xData;
      // options3.series = this.eSubjectData.dataList;
      options3.xAxis.name = '试验装备';
      options3.yAxis.name = '数量';
      this.eEquipment.setOption(options3);

      this.eTestEquipment = echarts.init(document.getElementById('eTestEquipment'));
      let options4 = this.option;
      // options4.xAxis.data = this.eSubjectData.xData;
      // options4.series = this.eSubjectData.dataList;
      options4.xAxis.name = '被测装备';
      options4.yAxis.name = '数量';
      this.eTestEquipment.setOption(options4);

      this.ePersonnel = echarts.init(document.getElementById('ePersonnel'));
      let options5 = this.option;
      // options5.xAxis.data = this.eSubjectData.xData;
      // options5.series = this.eSubjectData.dataList;
      options5.xAxis.name = '人员';
      options5.yAxis.name = '天数';
      this.ePersonnel.setOption(options5);
    },
    //重置筛选数据
    onClickRest() { 
      this.checkedList = [];
      // this.isResult = false;
      this.eSubjectData = {};
      this.ePlaceData = {};
      this.eEquipmentData = {};
      this.eTestEquipmentData = {};
      this.ePersonnelData = {};

      // this.eSubject.dispose();

      this.eSubject = null;
      this.ePlace = null;
      this.eEquipment = null;
      this.eTestEquipment = null;
      this.ePersonnel = null;

      
/* eSubjectData: {}, //科目数据
        ePlaceData: {}, //地址数据
        eEquipmentData: {}, //装备数据
        eTestEquipmentData: {}, //被测装备数据
        ePersonnelData: {}, //人员数据 */
    },
    //获取分组下拉数据列表
    asyncGetTreeList() {
      this.$axios.get("/statistics/listStatisticsTree", {
          params: {
            type: 1, //请求类型 1=资源统计树形 2=任务树形 3=科目树形
            resourceType: this.path[this.$route.path] //资源类型 1=实验人员 2=实验装备 3=实验场地 4=被测装备
          },
        }).then((res) => {
        if (res.data.code === 200) {
          this.dropData = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
      window.removeEventListener('resize', this.onResize);
    });
    next();
  },
  watch: {
    $route() {
      // this.nameDesc = this.nameObj[[this.path[this.$route.path]]];
      this.curType = this.path[this.$route.path];
      this.nameDesc = this.nameObj[this.curType]; 
      this.onClickRest(); 
      this.$nextTick(()=>{
        this.createEcharts(); 
      })
    }
  }
};
</script>
<style scoped>
.left {
  margin-left: 15px;
}

.statistics-task-container .el-table >>> thead th {
  padding: 5px 0;
}

.width-160 /deep/ .el-input {
  width: 160px;
}
.width-160 /deep/ .el-form-item__content {
  width: 345px;
}
.width-440 /deep/ .el-input {
  width: 440px;
}
.width-440 /deep/ .el-form-item__content {
  width: 440px;
}
.common-table-title {
  font-weight: bold;
}
.statistics-task-container .el-table >>> thead.is-group th {
  background: #fff;
}

/* .statistics-task-container .el-table >>> .warning-row td,
.statistics-task-container .el-table--striped >>> .warning-row td {
  
} */
/*  padding: 0;
    height: 30px;
    line-height: 30px; */
.statistics-task-container .el-table >>> .warning-row,
.statistics-task-container .el-table--striped >>> .warning-row td {
  background: oldlace !important;
}

/* .statistics-task-container .el-table >>> thead th {
  padding: 5px 0;
}

.statistics-task-container .width-160 /deep/ .el-input {
  width: 160px;
}
.statistics-task-container .width-160 /deep/ .el-form-item__content {
  width: 345px;
} */
.bottom-wrapper {
  overflow: hidden;
}
.echarts-wrapper,.echarts-item  {
  width: 100%;
  background-color: #F6F6F6;
}
.echarts-wrapper  {
    margin-top: 10px;
    overflow-x: auto;
}

.echarts-item {
  margin-bottom: 10px;
  /* background-color: #fff; */
}
.echarts-item-content {
  width: 100%;
  min-width: 1250px;
  display: flex;
  overflow: hidden;
  /* overflow-x: auto; */
}
.echarts-info {
  /* position: relative; */
  /* flex: 1; */
  width: 50%;
  /* padding-bottom: 20px; */
  box-sizing:border-box;
  background-color: #fff;
}

.echarts-info:first-child {
  margin-right: 10px;
}

/* .echarts-info.left-task::after{
  content:'';
  position: absolute;
  right:0;
  top:0;
  width:1px;
  background-color:#f3f3f3;
  height:100%
} */
.echarts-title {
  padding: 20px 0 0 20px;
  font-weight: bold;
}
.echarts-table {
  /* width: 100%;
  display: flex; */
  padding-top: 10px;
}
.canvas {
   width: 48vw!important;
   /* width: 75vw!important; */
   height: 40vh!important;
   margin: 0 auto;
}

.temp {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin: left 2px;
}
.ok {
  display: block;
  text-align: center;
  font-size: 22px;
  color: #4D74E9;
}


</style>

